<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">名称</label>
        <el-input v-model="query.name" clearable placeholder="名称" style="width: 185px;" class="filter-item"
          @keyup.enter.native="crud.toQuery" @change="onChange"/>
        <label class="el-form-item-label">实验室</label>
        <el-select v-model="query.labId" clearable style="width: 185px;" placeholder="实验室" class="filter-item"
          @keyup.enter.native="crud.toQuery">
          <el-option v-for="item in labs" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <label class="el-form-item-label">记录日期</label>
        <date-range-picker v-model="query.createdAt" class="date-item" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
        :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
<!--          <el-form-item label="类型" prop="type">
            <el-input v-model="form.type" style="width: 370px;" />
          </el-form-item> -->
          <el-form-item label="实验室" prop="labId">
            <el-select v-model="form.labId" style="width: 370px;" clearable filterable :remote-method="getLabs"
              :loading="searchLoading" placeholder="请选择实验室">
              <el-option v-for="item in labs" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="下载地址" prop="site">
            <el-input v-model="form.site" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="记录时间" prop="createdAt">
            <el-input v-model="form.createdAt" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
        @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" />
        <!-- <el-table-column prop="type" label="类型" /> -->
        <el-table-column prop="labName" label="实验室" />
        <el-table-column prop="site" label="下载地址" />
        <el-table-column prop="createdAt" label="记录时间" />
        <el-table-column label="视频记录" width="150px" align="center">
          <template slot-scope="scope">
            <el-button @click.native="viedoLook(scope.row)" type="text" size="small">播放</el-button>
            <el-button @click.native="viedoUpdown(scope.row)" type="text" size="small">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','vidiconRecord:edit','vidiconRecord:del'])" label="操作" width="150px"
          align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="view" :title="vidiconName">
      <video id="video" :src="videoSrc" style="width:100% ;height:600px" class="video-js" controls muted ref="player" @ended="ended" @play="play" @pause="pause"/>
      <div style="text-align: center;">
       <el-button icon="el-icon-caret-left" type="text" size="medium" style="margin-top: 30px;font-size: 30px;color: #000000;" @click.native="videoPlayerup"></el-button>
        <el-button :icon="icon" size="medium" type="text" style="font-size: 40px;color: #000000;margin-left: 50px;"
          @click.native="videoPlayer"></el-button>
       <el-button icon="el-icon-caret-right" type="text" size="medium" style="font-size: 30px;color: #000000;margin-left: 50px;" @click.native="videoPlayerdown"></el-button>
      </div>
  </el-dialog>
  </div>
</template>

<script>
  import crudVidiconRecord from '@/api/vidiconRecord'
  import CRUD, {
    presenter,
    header,
    form,
    crud
  } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operationDelete'
  import pagination from '@crud/Pagination'
  import {
    get
  } from '@/api/lab'
  import easyPlayer from '@easydarwin/easyplayer'
  import 'video.js/dist/video-js.css'
  import DateRangePicker from '@/components/DateRangePicker'
  const defaultForm = {
    id: null,
    labId: null,
    vidiconId: null,
    type: null,
    site: null,
    recordTime: null,
    createdAt: null,
    updatedAt: null,
    isDeleted: null,
    name: null
  }
  export default {
    name: 'VidiconRecord',
    components: {
      pagination,
      crudOperation,
      rrOperation,
      udOperation,
      easyPlayer,
      DateRangePicker
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      return CRUD({
        title: '摄像机记录',
        url: 'api/vidiconRecord/video',
        idField: 'id',
        sort: 'id,desc',
        crudMethod: {
          ...crudVidiconRecord
        },
        query:{
          name:''
        },
        optShow:{
          add:false,
          edit:false,
          del:true,
          download:true,
          reset:true,
        }
      })
    },
    data() {
      return {
        permission: {
          add: ['admin', 'vidiconRecord:add'],
          edit: ['admin', 'vidiconRecord:edit'],
          del: ['admin', 'vidiconRecord:del'],
        },
        rules: {
          name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '类型不能为空',
            trigger: 'blur'
          }],
          site: [{
            required: true,
            message: '保存地址不能为空',
            trigger: 'blur'
          }],
          createdAt: [{
            required: true,
            message: '记录时间不能为空',
            trigger: 'blur'
          }]
        },
        queryTypeOptions: [{
            key: 'createdAt',
            display_name: '记录时间'
          },
          {
            key: 'name',
            display_name: '名称'
          },
          {
            key: 'labName',
            display_name: '实验室'
          },
        ],
        searchLoading: false,
        searchForm: {
          page: 1,
          size: 10,
          name: '',
          id: ''
        },
        labs: [],
        view: false,
        videoSrc: '',
        vidiconName: '',
        icon:"el-icon-video-play",
        baseUrl: process.env.VUE_APP_BASE_API,
      }
    },
    created() {
      this.getLabs()
    },
    methods: {
      // 钩子：在获取表格数据之前执行，false 则代表不获取数据
      [CRUD.HOOK.beforeRefresh]() {
        if(this.$route.params.name){
        this.query.name = this.$route.params.name;
        this.$route.params.name =''
      }
        return true
      },
      getLabs(query = '') {
        this.searchForm.name = query
        this.searchLoading = true
        get()
          .then(response => {
            this.searchLoading = false
            this.labs = response
          })
          .catch(_ => {
            this.searchLoading = false
          })
      },
      viedoLook(row) {
        this.view = true
        this.vidiconName = row.labName + "--" + row.name;
        this.videoSrc = this.baseUrl + '/file/videos/' + row.site;
      },
      viedoUpdown(row) {
        window.open(this.baseUrl + '/file/videos/' + row.site)
      },
      videoPlayer() {
        const video = document.getElementById('video')
        if(video.paused){
          video.play()
        }else if(video.play()){
          video.pause()
        }
      },
      videoPlayerup(){
        var video= document.getElementById("video");
        this.$refs.player.currentTime -=10
        video.play()
      },
      videoPlayerdown(){
        var video= document.getElementById("video");
        this.$refs.player.currentTime +=10
        video.play()
      },
      play(){
        this.icon='el-icon-video-pause'
      },
      pause(){
        this.icon='el-icon-video-play'
      },
      ended(){
        this.icon='el-icon-refresh-left'
      },
      onChange(e) {
         this.$set(this.query, this.query.name,e)
      },
    },
  }
</script>

<style scoped>
</style>
